<template>
    <div id="check">
        <ReturnPage />
        <div class="mt20 tp_box">
            <!-- 查询表单 -->
            <el-form size="mini"
                     :inline="true"
                     :model="query"
                     class="demo-form-inline"
                     ref="query">
                <el-form-item label="配置文件名称:">
                    <el-input v-model="query.configName"
                              placeholder="请输入配置文件名称"></el-input>
                </el-form-item>
                <!-- <el-form-item label="主机名称:">
                    <el-input v-model="query.hostName"
                              placeholder="请输入主机名称"></el-input>
                </el-form-item> -->
                <el-form-item>
                    <el-button type="primary"
                               class="ml10"
                               @click="getList()">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="warning"
                               class="ml10"
                               @click="resetForm('query')">重置</el-button>
                </el-form-item>
            </el-form>
            <!-- 表格 -->
            <el-table :data="tableData"
                      style="width: 100%"
                      height="calc(100vh - 280px)">
                <el-table-column prop="configName"
                                 label="配置文件名称"
                                 align="center">
                </el-table-column>
                <el-table-column prop="configDir"
                                 label="配置文件目录"
                                 align="center">
                </el-table-column>
                <el-table-column prop="hostName"
                                 label="主机名称"
                                 align="center">
                </el-table-column>
                <el-table-column prop="hostIp"
                                 label="主机ip"
                                 align="center">
                </el-table-column>
                <!-- <el-table-column prop="backupMode"
                                 label="备份方式"
                                 align="center">
                    <template slot-scope="{row: {backupMode}}">
                        <el-tag type="danger"
                                v-if="+backupMode == 0">手动</el-tag>
                        <el-tag type="sunness"
                                v-else-if="+backupMode == 1">自动</el-tag>
                    </template>
                </el-table-column> -->
                <!-- <el-table-column prop="status"
                                 label="备份状态"
                                 align="center">
                    <template slot-scope="{row: {status}}">
                        <el-tag type="warning"
                                v-if="+status == 0">未知</el-tag>
                        <el-tag type="danger"
                                v-else-if="+status == 1">未备份</el-tag>
                        <el-tag type="success"
                                v-else-if="+status == 2">已备份</el-tag>
                    </template>
                </el-table-column> -->
                <el-table-column prop="createTime"
                                 label="创建时间"
                                 align="center">
                </el-table-column>
                <el-table-column prop="checkTime"
                                 label="检查时间"
                                 align="center">
                </el-table-column>
                <el-table-column prop="version"
                                 label="版本号"
                                 align="center">
                    <template slot-scope="scope">
                        {{"v"+scope.row.version}}
                    </template>
                </el-table-column>
                <el-table-column label="操作"
                                 align="center">
                    <template slot-scope="scope">
                        <el-button type="primary"
                                   @click="check(scope.row.id)"
                                   size="mini">配置检查</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="tableData.length > 0"
                        :total="total"
                        :page.sync="query.pageNum"
                        :limit.sync="query.pageSize"
                        @pagination="getList" />

            <!-- 文件对比弹窗 -->
            <el-dialog title="配置检查"
                       :visible.sync="dialogTableVisible">
                <h3 class="mb20">请先选择修改的文件,再选择对比文件,<span style="color:red">只能选择两项</span></h3>
                <el-table :data="gridData"
                          @selection-change="handleSelectionChange"
                          height="calc(100vh - 380px) "
                          :header-cell-class-name="cellClass">
                    <el-table-column type="selection"
                                     width="55">
                    </el-table-column>
                    <el-table-column property="id"
                                     label="id"
                                     align="center"></el-table-column>
                    <el-table-column property="configName"
                                     label="配置文件名称"
                                     align="center"></el-table-column>
                    <el-table-column property="hostIp"
                                     label="主机ip"
                                     align="center"></el-table-column>
                    <el-table-column property="updateTime"
                                     label="更新时间"
                                     align="center"></el-table-column>
                    <el-table-column property="version"
                                     label="备份版本"
                                     align="center"></el-table-column>
                </el-table>
                <pagination v-show="gridData.length > 0"
                            :total="gridDatatotal"
                            :page.sync="gridDataquery.pageNum"
                            :limit.sync="gridDataquery.pageSize"
                            @pagination="getOneConfigList" />
                <div slot="footer"
                     class="dialog-footer">
                    <el-button type="primary"
                               :disabled="disabled"
                               @click="getCompareFile()">文件对比</el-button>
                    <el-button @click="dialogTableVisible = false">取 消</el-button>
                </div>
            </el-dialog>

            <el-dialog type="border-card"
                       title="文件对比"
                       :visible.sync="codeVisible">
                <!-- <h3>IP: 192.168.10.252</h3> -->
                <div style="display: flex;margin-top: 10px;">
                    <h3 style="width: 50%">对比文件:</h3>
                    <h3 style="width: 50%">修改文件:</h3>
                </div>
                <div id="editorJson"
                     class="monaco" />
                <h3 class="mt10">注意：修改后的文件会保存为新配置文件</h3>
                <el-button type="primary"
                           @click="getCompareFileSubmit"
                           class="mt20">保存</el-button>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import {
        getConfigcheckListApi,
        getOneConfigListApi,
        getCompareFileApi,
        getCompareFileSubmitApi
    } from "@/api/automated/instrumentPanel"
    import { beautifierConf } from "@/utils/index";
    import loadMonaco from "@/utils/loadMonaco";
    import loadBeautifier from "@/utils/loadBeautifier";
    let beautifier;
    let monaco;
    export default {
        data () {
            return {
                submitQuery: {
                    configBackupId1: "",
                    configBackupId2: "",
                    fileContent1: ``,//旧代码
                    fileContent2: ``//新代码
                },
                disabled: true,
                multipleSelection: [],
                codeVisible: false,
                gridData: [],
                gridDatatotal: "",
                gridDataquery: {
                    pageNum: 1,
                    pageSize: 10,
                },
                gridDataid: "",
                dialogTableVisible: false,
                tableData: [],
                //分页查询
                query: {
                    pageNum: 1,
                    pageSize: 10,
                    configName: "",
                    hostName: ""
                },
                total: 0,
                //新旧编辑器模型
                originalModel: null,
                modifiedModel: null,
            };
        },
        methods: {
            cellClass (row) {
                if (row.columnIndex === 0) {
                    return 'disabledCheck'
                }
            },
            resetForm (formName) {
                this.query.configName = "",
                    this.query.hostName = "",
                    this.getList()
            },
            //多选
            handleSelectionChange (val) {
                this.multipleSelection = val;
                if (this.multipleSelection.length == 2) {
                    this.disabled = false;
                }
                else {
                    this.disabled = true;
                }
            },
            //列表数据
            async getList () {
                this.query.hostId = this.$route.query.hostid
                let res = await getConfigcheckListApi(this.query)
                let { code, rows } = res
                if (code == 200) {
                    this.tableData = rows
                    this.total = res.total
                }
            },
            //弹窗表格数据
            async check (id) {
                this.gridDataid = id
                this.getOneConfigList()
            },
            async getOneConfigList () {
                let res = await getOneConfigListApi(this.gridDataid, this.gridDataquery)
                let { code, rows, total } = res
                if (code == 200) {
                    this.gridData = rows
                    this.gridDatatotal = total
                    this.dialogTableVisible = true
                }
            },

            //对比数据
            async getCompareFile () {
                let res = await getCompareFileApi(this.multipleSelection[0].id, this.multipleSelection[1].id)
                let { code, data } = res
                if (code == 200) {
                    this.submitQuery = data
                    this.codeVisible = true
                    this.$nextTick(() => {
                        this.onOpen()
                    })
                }
            },
            // 提交对比
            async getCompareFileSubmit () {
                this.submitQuery.fileContent1 = this.getValue()
                let res = await getCompareFileSubmitApi(this.submitQuery)
                let { code, msg } = res
                if (code == 200) {
                    this.$message.success(msg)
                    this.codeVisible = false
                    this.dialogTableVisible = false
                    location.reload();
                } else {
                    this.$message.error(msg)
                }
            },
            //代码格式化
            onOpen () {
                loadBeautifier((btf) => {
                    beautifier = btf;
                    this.beautifierJson = beautifier.js(this.jsonStr, beautifierConf.js);
                    this.submitQuery.fileContent1 = beautifier.js(this.submitQuery.fileContent1, beautifierConf.js);
                    this.submitQuery.fileContent2 = beautifier.js(this.submitQuery.fileContent2, beautifierConf.js);

                    loadMonaco((val) => {
                        monaco = val;
                        this.setEditorValue("editorJson", this.beautifierJson);
                    });
                });
            },
            //创建编辑器
            setEditorValue (id, codeStr) {
                const editorJson = document.getElementById(id);
                if (this.jsonEditor) {
                    alert()
                    this.jsonEditor.setValue(codeStr);
                } else {
                    this.jsonEditor = monaco.editor.createDiffEditor(editorJson, {
                        theme: "vs",
                        language: "json",
                        automaticLayout: true,
                    });

                    this.originalModel = monaco.editor.createModel(this.submitQuery.fileContent2, "json");
                    this.modifiedModel = monaco.editor.createModel(this.submitQuery.fileContent1, "json");
                    this.jsonEditor.setModel({
                        original: this.originalModel,
                        modified: this.modifiedModel,
                    });
                }
            },
            // 此方法获取到编辑的最新值，传给父组件
            getValue () {
                return this.modifiedModel.getValue()
            },
        },
        watch: {
            codeVisible (newVal, oldVal) {
                if (newVal == false) {
                    this.jsonEditor = null
                    this.originalModel = null
                    this.modifiedModel = null
                    monaco = null
                    beautifier = null
                    this.beautifierJson = null
                }
            }
        },
        created () {
            this.getList()
        },
    };
</script>

<style lang="scss" scoped>
    /* 去掉全选按钮 */
    ::v-deep .el-table .disabledCheck .cell .el-checkbox__inner {
        display: none !important;
    }

    #check {
        h3 {
            font-weight: 550;
        }

        .right {
            margin-left: calc(50% - 70px);
        }
    }

    .monaco {
        overflow: hidden;
        border: 1px solid #d3d3d3;
        border-radius: 5px;
        margin-top: 20px;
        height: calc(100vh - 340px);
    }
</style>